<template>
  <van-popup v-model="openPopUp" position="bottom" round get-container="body">
    <van-nav-bar title="选择区号" @click-left="onClickLeft" @click-right="onClickLeft">
      <template #left>
        <span>取消</span>
      </template>
      <template #title>
        <div style="font-size: 1.2rem;">选择区号</div>
      </template>
      <template #right>
        <span>确认</span>
      </template>
    </van-nav-bar>
    <div class="country_code_Box">
      <van-radio-group v-model="optValue" @change="updateValue">
        <van-cell-group>
          <template v-for="(item, index) in country_code_arr">
            <van-cell title-style="text-align:left;" :title="`${item.name}+${item.code}`" clickable @click="tapSelect(item.code)" :key="index">
              <template #right-icon>
                <van-radio :name="item.code" />
              </template>
            </van-cell>
          </template>
        </van-cell-group>
      </van-radio-group>
    </div>
  </van-popup>
</template>
<script>
export default {
  props: {
    openPopUp: {
      type: Boolean,
      default: false
    },
    optValue: {
      type: String,
      default: ""
    }
  },
  data() {
    return {
      country_code_arr: COUNTRYCODEARR
    };
  },
  methods: {
    onClickLeft() {
      this.$emit("update:openPopUp", false);
    },
    updateValue(value) {
      this.$emit("update:optValue", value);
    },
    tapSelect(value){
      this.$emit("update:optValue",value)
    }
  }
};
</script>
<style lang="scss" scoped>
.country_code_Box {
  height: 40vh;
  overflow-y: scroll;
}
</style>
